
<template>
  <div class="container">
    <div class="header-box">
      <div v-for="(item,index) in selectList" :key="item" :style="{background:selectIndex===index?'var(--ep-color-background)':'',color:selectIndex===index?'var(--el-color-primary)':'#89919c'}" @click="select(index)" >{{ item }}</div>
    </div>

    <div class="header-rights">
      <div v-for="(item2,index) in timeSelected" :key="item2" :style="{color:selectTimeIndex===index?'var(--el-color-primary)':'#89919c'}" @click="selectTime(index)">{{ item2 }}</div>
    </div>
    <div ref="chart1" class="chart"></div>
  </div>
</template>
<script>
export default {
  name: 'BottomMiddle',
  data() {
    return {
      selectList: ['访问总量', '新增访问', '活跃访问', '流失访问'],
      selectIndex: 0,
      selectTimeIndex: 0,
      timeSelected: ['半年', '本月', '本周']
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    select(index) {
      this.selectIndex = index
    },
    selectTime(ind) {
      this.selectTimeIndex = ind
    },
    echartsInit() {
      const dataX = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
      const y = [10, 28, 30, 44, 61, 58, 77, 60, 78, 53, 70, 103]

      const options = {
        title: {
          show: false,
          text: '',
          left: 'center',
          top: '8%',
          textStyle: {
            color: '#111111', // 标题颜色
            fontWeight: 'bold',
            fontSize: 16
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(33,56,77,1)',
          borderColor: 'rgba(33,56,77,1)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          axisPointer: {
            lineStyle: {
              color: '#ccc',
              type: 'dashed',
              width: 2
            }
          }
        },
        legend: {
          show: false,
          right: 'center',
          top: '5%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 25,
          icon: 'stack',
          textStyle: {
            color: '#E1E5E6'
          }
        },
        grid: {
          top: '10%',
          right: '1%',
          bottom: '8%',
          left: '1%',
          containLabel: true
        },
        xAxis: {
          show: true,
          data: dataX,
          type: 'category',
          boundaryGap: true,
          axisLabel: {

            color: '#89919c',
            fontSize: 12

          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false // 去除刻度线
          }
        },
        yAxis: {
          show: true,
          type: 'value',
          axisTick: { show: false },
          axisLine: {
            show: false
          },
          axisLabel: {

            color: '#89919c',
            fontSize: 12

          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: '#edeef4',
              type: 'dashed'
            }
          }
        },
        series: [

          {
            name: '数量',
            smooth: true,
            type: 'line',
            // 填充颜色设置
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(23, 98, 242,.4)' // 渐变色的起始颜色
                  },
                  {
                    offset: 0.9,
                    color: 'rgba(23, 98, 242,0)' // 渐变线的结束颜色
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 4,
            // 设置拐点颜色以及边框
            itemStyle: {
              // color: "rgba(241,162,42,1)",
              color: 'rgba(23, 98, 242, 1)'
            },
            data: y
          }
        ]
      }
      const myChart = this.$echarts.init(this.$refs.chart1)
      myChart.setOption(options)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

  }
}
</script>

<style scoped lang="scss">
.container{
  position: relative;
  overflow: hidden;

  .chart{
    width: 32.813vw;
    height: 12.135vw;
    margin-top: 2.083vw;

  }

  .header-box{
    position: absolute;
    top: 0.625vw;
    left: 1.042vw;
    z-index: 998;
    display: flex;

    div{
      width: 3.125vw;
      margin-right: 1.042vw;
      color: #89919c;
      font-size: 0.625vw;
      text-align: center;
      border-radius: 2.604vw;
      cursor: pointer;
    }
  }

  .header-rights{
    position: absolute;
    top: -1.823vw;
right: 1.042vw;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
width: 7.813vw;
    height: 1.042vw;
margin-top: 2.604vw;
    padding:0 1.042vw;
    color: #666;
    font-size: 0.625vw;
    background-color:var(--ep-color-background) ;

    div{
      cursor: pointer;
    }
  }
}

</style>
